class Tab {
    constructor() {

        this.tab = this.$('tab')
        console.log(tab);
        this.btn = this.$('btn')
        this.btnAll = btn.children
        console.log(this.btnAll);
        this.mainBox = this.$('mainBox')
        this.mainAll = this.mainBox.children
        console.log(this.mainAll);
        this.click()
        
    }
    $ = id => document.getElementById(id)

    click() {
        for (let i = 0; i < this.btnAll.length; i++) {

            let btnAlls = this.btnAll
            let mainAlls = this.mainAll
            let btnAll = this.btnAll.length
            btnAlls[i].index = i
            btnAlls[i].onclick = function () {
                
                for (let j = 0; j < btnAll; j++) {
                    btnAlls[j].className=''
                    mainAlls[j].className = ''
                }
                this.className='color'
                mainAlls[this.index].className = 'active'

            }
        }
    }
   
}
new Tab()


// var div = document.getElementById('div')
//     var divs = div.children
//     console.log(divs);
//     var div1 = document.getElementById('div1')
//     var div1s = div1.children

//     for (i = 0; i < div1s.length; i++) {
//         div1s[i].index = i
//         div1s[i].onclick = function () {
//             // console.log(this.index);

//             // console.log(this);
//             for (j = 0; j < div1s.length; j++) {
//                 divs[j].className = ''
//                 div1s[j].className=''
//             }
//             this.className='color'
//             console.log(divs[this.index]);
//             divs[this.index].className = 'active'
//         }
//     }